<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link data-n-head="true" rel="icon" type="image/x-icon" href="https://www.dickies.com.cn/app/site/statics/favicon.ico">
		<title>Dickies</title>
		<style>
			@import url(css/reset.css);
		    @import url(css/header.css);
		    @import url(css/details.css);
		    @import url(css/footer.css);
		</style>
	</head>
	<body>
		<header></header>
		<!-- 头部 -->
		<div id="header-top">
			<div class="header-con-top">
				<ul class="top">
					<li>
						<a href="shopping.html">我的购物车<img src="img/gouwuche.png" alt=""><span>0</span></a>
					</li>
					<li>
						<a href="#">在线客服<img src="img/xiaoxi.png" alt=""></a>
					</li>
					<li>
						<a href="#">门店查询</a>
					</li>
					<li class="loginto">
						<a href="Login.html" id="a1">登录</a>|<a href="#" id="a2">注册<img src="img/denlu.png" alt=""></a>
					</li>
					<!-- 购物车弹出框 -->
					<ul class="pop">
						购物车中还没有商品赶紧选购吧
						<p class="go">立即选购</p>
					</ul>

				</ul>


			</div>
		</div>
		<div id="header-center">
			<div class="header-con-center">
				<div class="center">
					<div id="onelogo">
						<a href="Home.html"><img src="img/logo.png" alt=""></a>
					</div>
					<ul id="oneul">
						<li id="oneli"><a href="#">全部商品</a></li>
						<li id="oneli"><a href="#">新品</a></li>
						<li class="man" id="oneli">
							<a href="#">男装</a>
							<!-- 二级导航 -->
							<!-- 男装 -->
							<div class="second" id="gentle">
								<div class="second-con">
									<ul class="second-left">
										<li>
											<a href="#">
												<h3>男士上装</h3>
												<p>薄外套</p>
												<p>衬衫</p>
												<p>短袖Polo</p>
												<p>短袖T桖</p>
												<p>卫衣</p>
												<p>羽绒服</p>
												<p>长袖T桖</p>
												<p>长袖衬衫</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>男士下装</h3>
												<p>短裤</p>
												<p>连体装</p>
												<p>卫裤</p>
												<p>休闲裤</p>
												<p>长裤</p>
											</a>
										</li>
									</ul>
									<ul class="second-right">
										<li>
											<a href="#"><img src="img/nanzhuang1.jpg" alt="">
												<p>Dickies薄外套</p>
											</a>
										</li>
										<li>
											<a href="#"><img src="img/nanzhuang2.jpg" alt="">
												<p>Dickies下装</p>
											</a>
										</li>
									</ul>
								</div>
							</div>

						</li>
						<li class="woman" id="oneli">
							<a href="#">女装</a>
							<!-- 二级导航 -->
							<!-- 女装 -->
							<div class="second" id="lady">
								<div class="second-con">
									<ul class="second-left">
										<li>
											<a href="#">
												<h3>女士上装</h3>
												<p>薄外套</p>
												<p>衬衫</p>
												<p>短袖Polo</p>
												<p>短袖T桖</p>
												<p>卫衣</p>
												<p>羽绒服</p>
												<p>长袖T桖</p>
												<p>棉服</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>女士下装</h3>
												<p>半身裙</p>
												<p>短裤</p>
												<p>连体装</p>
												<p>连衣裙</p>
												<p>卫裤</p>
												<p>休闲裤</p>
												<p>阔腿裤</p>
												<p>长裤</p>
											</a>
										</li>
									</ul>
									<ul class="second-right">
										<li>
											<a href="#"><img src="img/nvzhuang1.jpg" alt="">
												<p>Dickies卫衣</p>
											</a>
										</li>
										<li>
											<a href="#"><img src="img/nvzhuang2.jpg" alt="">
												<p>Dickies下装</p>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</li>
						<li id="oneli"><a href="#">情侣款</a></li>
						<li id="oneli"><a href="#">配件</a></li>
						<li id="oneli"><a href="#">童鞋</a></li>
						<li id="oneli"><a href="#">品牌动态</a></li>
					</ul>
					<span>
						<input type="text" placeholder="搜索Dickies">
					</span>

				</div>
				<ul class="opt">
					<li>热门搜索</li>
					<li>卫衣</li>
					<li>卫裤</li>
					<li>工装裤</li>
				</ul>
			</div>
		</div>
		<div class="top-buttom"></div>
		<!-- 详情页 -->
		<div id="details">
			<div id="detal">
				<div class="detal-left">
					<div class="detal-left-magn">
						<div class="detal-left-mask"></div>
					</div>
					<div class="detal-left-bigpic"></div>
					<ul class="detal-left-choice">
						<li class="detal-choice-bod"><img src="img_page/6.jpg"></li>
						<li><img src="details/detheadfot2.jpg"></li>
						<li><img src="details/detheadfot3.jpg"></li>
						<span><img src="details/left.png"></span>
						<span><img src="details/right.png"></span>
					</ul>
				</div>
				<div class="detal-param">
					<ul class="detal-param-price">
						<li>Dickies 高达联名款情侣卫衣</li>
						<li>DK008469</li>
						<li>￥521.00 <span class="param-price-orig">￥599.00</span></li>
						<li><span class="param-price-disc">多买多折</span> 2件9折</li>
						<li>
							<span class="param-price-ship">
								<img src="details/baoyou.png">顺丰包邮</span>
							<span class="param-price-retn">
								<img src="details/qitian.png">7天无理由退换货</span>
						</li>
					</ul>
					<div class="detal-param-specs">
						<p>请选择规格</p>
						<ul class="detal-param-specsUl">
							<li><img src="details/detheadspe1.jpg"></li>
							<li><img src="details/detheadspe2.jpg"></li>
							<li><img src="details/detheadspe3.jpg"></li>
						</ul>
					</div>
					<ul class="detal-param-size">
						<p>选择尺码</p>
						<li>XS</li>
						<li>S</li>
						<li>M</li>
						<li>L</li>
						<li>XL</li>
						<li>XXL</li>
					</ul>
					<div class="detal-param-numb">
						<p>数量</p>
						<button type="button" class="param-numb-red">-</button>
						<div class="param-numb-show">1</div>
						<button type="button" class="param-numb-add">+</button>
					</div>
					<div class="detal-param-join">
						<button type="button" class="param-join-shop">加入购物车</button>
						<button type="button" class="param-join-buy">立即购买</button>
					</div>
					<div class="detal-param-coll">
						<div class="detal-param-coll1">
							<img src="details/xin1.png" class="param-coll-img1">
							<span>立即收藏</span>
						</div>
						<div class="detal-param-coll2">
							<img src="details/xin2.png" class="param-coll-img2">
							<span>已收藏</span>
						</div>
					</div>
					<ul class="detal-param-share">
						<li><img src="details/weibo.png"></li>
						<li><img src="details/weixin.png"></li>
						<li><img src="details/qq.png"></li>
						<li><img src="details/kongjian.png"></li>
						<li><img src="details/xiaohongshu.png"></li>
					</ul>
				</div>
			</div>
			<div id="show">
				<ul class="show-picture">
					<li><img src="img_page/4.jpg"></li>
					<li><img src="img_page/11.jpg"></li>
					<li><img src="img_page/12.jpg"></li>
					<li><img src="img_page/21.jpg"></li>
					<li><img src="details/show5.jpg"></li>
					<li><img src="details/show6.jpg"></li>
					<li><img src="img_page/15.jpg"></li>
					<li><img src="img_page/16.jpg"></li>
					<li><img src="details/show9.jpg"></li>
					<li><img src="details/show10.jpg"></li>
					<li><img src="details/show11.jpg"></li>
					<li><img src="details/show12.jpg"></li>
					<li><img src="img_page/22.jpg"></li>
					<li><img src="img_page/17.jpg"></li>
					<li><img src="img_page/20.jpg"></li>
					<li><img src="img_page/23.jpg"></li>
					<li><img src="img_page/24.jpg"></li>
					<li><img src="img_page/25.jpg"></li>
					<li><img src="details/show19.jpg"></li>
				</ul>
			</div>
			<div id="season">
				<p class="season-topic">当季主推</p>
				<div class="season-main">
					<span class="season-main-left"><img src="details/left.png"></span>
					<span class="season-main-right"><img src="details/right.png"></span>
					<ul class="season-main-ul">
						<li id="season-main-one"><img src="details/showseason1.jpg">
							<p>Dickies男式明线装饰工装长袖衬衫</p>
							<p>￥309.00</p>
						</li>
						<li><img src="details/showseason2.jpg">
							<p>Dickies女式印花阔腿喇叭裤</p>
							<p>￥359.00</p>
						</li>
						<li><img src="details/showseason3.jpg">
							<p>Dickies男式压线连帽印花宽松外套</p>
							<p>￥539.00</p>
						</li>
						<li><img src="details/showseason4.jpg">
							<p>Dickies男式彩色LOGO印花短袖T恤</p>
							<p>￥259.00</p>
						</li>
						<li><img src="details/showseason5.jpg">
							<p>Dickies女式LOGO印花短袖T恤</p>
							<p>￥207.00</p>
						</li>
						<li><img src="details/showseason6.jpg">
							<p>Dickies男式LOGO印花短袖T恤</p>
							<p>￥174.00</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 尾部 -->
		<div class="end">
			<div class="end-con">
				<h2><img src="img/logo.png" alt=""></h2>
				<ul>
					<li>
						<p>在线客服<img src="img/xiaoxihong.png" alt=""></p>
						<p>在线时间09:00-22:00</p>
					</li>
					<li>
						<p>官方商城</p>
						<p>全部商品</p>
						<p>新品</p>
						<p>男装</p>
						<p>女装</p>
						<p>鞋类</p>
					</li>
					<li>
						<p>关于Dickies</p>
						<p>品牌故事</p>
						<p>品牌动态</p>
					</li>
					<li>
						<p>客户服务</p>
						<p>订购流程</p>
						<p>如何注册</p>
						<p>常见问题</p>
						<p>联系我们</p>
					</li>
					<li>
						<p>关注我们</p>
						<p>
							<img src="img/weibo.png" alt="">
							<img src="img/weixin.png" alt="">
						</p>
					</li>
				</ul>
			</div>

		</div>
		<div class="last">
			<p>
				<span>沪ICP备18048101号 ©2019 Williamson-Dickie Mfg. Co., LLC. Quality Workwear Since 1922</span>
				<span>隐私政策 安全政策</span>
			</p>
		</div>

		<!-- 侧边栏 -->
		<ul class="sider">
			<li><img src="img/xiaoxi.png" alt="">
				<p>在线客服</p>
			</li>
			<li><img src="img/xiaoxi.png" alt="">
				<p>常见问题</p>
			</li>
			<li><img src="img/left.png" alt=""></li>
		</ul>

		<footer></footer>
	</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/header.js"></script>
<script src="js/footer.js"></script>
<script src="js/details.js"></script>
<script type="text/javascript">
	let oDetalmagn = document.querySelector(".detal-left-magn");
	let oDetalMask = document.querySelector(".detal-left-mask");
	let oDetalBigpic = document.querySelector(".detal-left-bigpic");
	let oDetalcoll = document.querySelector(".detal-param-coll");
	let oDetalcoll1 = document.querySelector(".detal-param-coll1");
	let oDetalcoll2 = document.querySelector(".detal-param-coll2");
	let oParamnumRed = document.querySelector(".param-numb-red");
	let oParamnumAdd = document.querySelector(".param-numb-add");
	let oParamnumShow = document.querySelector(".param-numb-show");

	let mage = new Magnifier(oDetalmagn, oDetalMask, oDetalBigpic);

	oDetalcoll.onclick = function() {
		let index = 0;
		if (index % 2) {
			index++;
			oDetalcoll1.style.display = "block";
			oDetalcoll2.style.display = "none";
		} else {
			index++;
			oDetalcoll1.style.display = "none";
			oDetalcoll2.style.display = "block";
		}
	}

	// 商品数量的加和减
	let num = 1;
	oParamnumShow.innerText = num;
	oParamnumAdd.onclick = function() {
		num++;
		oParamnumShow.innerText = num;
	}
	num = oParamnumShow.innerHTML;
	oParamnumRed.onclick = function() {
		if (num <= 1) {
			num = 1;
			oParamnumShow.innerText = num;
		} else if (num > 1) {
			num--;
			oParamnumShow.innerText = num;
		}
	}
</script>
